<template>
   <div class="box">
      <!-- 
      需求分析:
         1. 头部组件封装
         2. 轮播图功能
         3. 网格列表
         4. 秒杀列表功能
         5. 商品列表
            5.1 上拉加载
            5.2 下拉刷新 -->

      <!-- 头部搜索 -->
      <HomeHeader></HomeHeader>

      <van-pull-refresh v-model="tloading" @refresh="onRefresh" success-text="刷新成功">

         <!-- 轮播图 -->
         <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
            <van-swipe-item><img src="@/img/11.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/img/22.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/img/33.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/img/44.jpg" alt=""></van-swipe-item>
         </van-swipe>

         <!-- 宫格 菜单栏 -->
         <van-grid :column-num="5" :border="false" center>
            <van-grid-item v-for="item in gridList" :key="item.id">
               <img :src="item.url" alt="">
               <span>{{ item.text }}</span>
            </van-grid-item>
         </van-grid>

         <!-- 秒杀模块 -->
         <div class="skill">
            <p><span class="sk1">京东秒杀</span>
               <span class="sk2">{{ showHours }}点场</span>
               <span class="sk3">
                  <van-count-down :time="time" auto-start>
                     <template #default="timeData">
                        <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours }}</span>
                              <span class="colon">:</span>
                              <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes
                              }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.seconds < 10 ? '0' + timeData.seconds :
                                       timeData.seconds }}</span>
                     </template>
                  </van-count-down>
               </span>
            </p>
            <!-- 秒杀的商品内容 -->
            <ul>
               <!-- <li v-for="item in skList" key="index">
               <img class="imgBox" :src="item.img" alt="">
               <span>${{ item.price }}</span>
            </li> -->
               <li v-for="item in miaoshaList" :key="item.proid">
                  <img class="imgBox" :src="item.img2" alt="">
                  <span>${{ item.originprice }}</span>
               </li>
            </ul>
         </div>

         <!-- 商品列表 -->
         <van-list v-model:loading="onloadLoading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <GoodsList :goodsList="goodsList"></GoodsList>
            <!-- <GoodsList :goodsList="goodsListDataPro"></GoodsList> -->
         </van-list>
         <!-- <van-grid :column-num="2">
            <van-grid-item v-for="item in goodsList" :key="item.id" icon="photo-o" text="文字" >
               <img class="proImg" :src="item.img1" alt="">
               <span>{{ item.proname }}</span>
            </van-grid-item>
         </van-grid> -->

      </van-pull-refresh>

      <!-- 底部组件 -->
      <HomeFooter></HomeFooter>

   </div>
</template>

<script setup lang="ts">
import HomeHeader from '@/components/Homeheader.vue'
import GoodsList from '@/components/goodsList.vue'
import HomeFooter from '@/components/HomeFooter.vue'

import { getBanner, getSecondKillGoods, getGoodsList, getGridList, getRecommendList, getGoodsListPro } from '@/api/home'
import { useUserStore } from '@/store/useStore'
import { ref, onMounted } from 'vue'

// 获取用户的id
const user = useUserStore();   // 使用pinia 

let bannerlist = ref([])
let miaoshaList = ref([])
let gridList = ref([])
let goodsList = ref([])
let recommendList = ref([])
const goodsListDataPro = ref([])   // 推荐商品列表

const onloadLoading = ref(false) // 控制加载状态（是否开启加载）

const finished = ref(false)  // 加载是否完成
const tloading = ref(false);  // false 刷新完成  true 正在刷新
const count = ref(1)

// 轮播图数据
onMounted(async () => {
   let res = await getBanner()   //轮播图
   bannerlist.value = res.data
   // console.log(bannerlist.value, 333333333);

})

// 宫格数据--菜单栏   商品列表
const initData = async () => {   // async await 语法糖
   let res1 = await getGridList()  // 宫格数据
   console.log(res1, 5555);
   gridList.value = res1;
}
onMounted(() => {
   initData()
})


// 秒杀的时间设置
let time = ref(0)  //距离下一场秒杀 的毫秒数
let showHours = ref(0)  // 时间场次
let timeId = null   //定时器编号

// 1. 倒计时时间
onMounted(() => {
   setInterval(() => {
      // 获取当前时间  new Date()
      let now = new Date()
      let year = now.getFullYear()
      let month = now.getMonth() + 1
      let day = now.getDate()
      let hours = now.getHours()

      // 定义， 要秒杀的时间
      let nextHours = hours % 2 == 1 ? hours + 1 : hours + 2  //当前小时 的下一个小时
      // let currentTime = new Date() //当前时间

      let miaosha = new Date(year, month, day, nextHours, 0, 0)  //定义秒杀的时间 ==》 下一个小时（整点）

      showHours.value = miaosha.getHours() //显示秒杀的 场次

      // 倒计时显示  毫秒数（秒杀的时间 - 当前时间）
      time.value = miaosha.getTime() - now.getTime()
   }, 1000)
})

// 秒杀数据 初始版本
// const skList = [
//    { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 },
//    { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 }, { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 },
//    { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 },
//    { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 },
//    { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 },
//    { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 },
//    { img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/202542/20/21836/111751/6286f556E8358b128/b1b0a5244a444c02.jpg', price: 200 },
// ]
// 秒杀商品展示  获取秒杀数据
onMounted(() => {
   getSecondKillGoods().then(res => {
      // console.log(res, 1111111111);
      miaoshaList.value = res.data
   })
})


// 商品数据 goodsList
onMounted(() => {
   getGoodsList().then((res) => {
      // console.log(res.data,6666);
      goodsList.value = res.data
   })

   // getRecommendList().then((res) => {
   //    recommendList.value = res.data
   // })

   getGoodsListPro(count.value).then((res) => {
      goodsListDataPro.value = res.data
   })

})

// 下拉刷新


const onRefresh = () => {
   // 1. 加载loading数据
   // 2. 重置所有数据

   tloading.value = true  // 正在刷新

   let p1 = getBanner()
   let p2 = getSecondKillGoods()
   count.value = 1
   let p3 = getGoodsList(count.value)

   Promise.all([p1, p2, p3]).then((arrData) => {
      console.log('arrData:', arrData);

      //  对数据重新赋值
      bannerlist.value = arrData[0].data
      miaoshaList.value = arrData[1].data
      // goodsList.value = arrData[2].data
      goodsListDataPro.value = arrData[2].data
      // 完成后
      tloading.value = false
      onloadLoading.value = false
      count.value = 1
   })
}


// 上拉加载
const onLoad = () => {
   // console.log(999);   
   
   // onloadLoading.value = false //开启 上拉加载

   // 异步更新数据
   count.value++  //总页数total  页数++

   // 推荐商品 列表
   getGoodsListPro({ count: count.value }).then((res) => {
      console.log('res', res.data, 777777777);
      goodsListDataPro.value = [...goodsListDataPro.value, ...res.data];
   })


   // 加载状态结束
   onloadLoading.value = false

   // 数据全部加载完成
   if (count.value >= 4) {
      finished.value = true
   }
}
</script>
<style scoped lang="scss">
// 轮播图样式
.my-swipe .van-swipe-item {
   color: #fff;
   font-size: 20px;
   line-height: 150px;
   text-align: center;
   background-color: #39a9ed;
   border-radius: 10px;
   margin: 10px 0;
}

img {
   width: 100%;
   height: 200px;
}

// 宫格-菜单栏样式
.van-grid-item {
   padding: 0;
   widows: 20%;
   height: 100px;

   img {
      width: 45px;
      height: 45px;
   }

   span {
      margin-top: 5px;
      font-size: 10px;
   }
}
// 秒杀模块
.skill {
   background: #fff;
   // height: 300px;
   padding: 5px 0;
   margin-top: 10px;

   ul {
      display: flex;
      overflow: hidden;
      overflow-x: scroll;
      padding-left: 5px;

      li {
         width: 150px;
         margin: 5px;
         text-align: center;
         display: flex;
         flex-direction: column;
         align-items: center; // 左右居中

         .imgBox {
            width: 60px;
            height: 60px;
         }

         span {
            padding: 5px;
            color: orangered;
            font-weight: 700;
         }
      }

   }

   p {
      padding-left: 10px;

      .sk1 {
         font-weight: 700;
         font-size: 18px;
      }

      .sk2 {
         color: orangered;
         font-weight: 700;
         font-size: 16px;
         margin-left: 10px;
      }

      .sk3 {
         display: inline-block;
         margin-left: 10px;

         .colon {
            display: inline-block;
            margin: 0 4px;
            color: orangered;
         }

         .block {
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: rgb(243, 51, 51);
            border-radius: 5px;
         }
      }
   }
}

.box {
   padding-top: 44px;
   padding-bottom: 30px;

}
</style>